
<template>
<div class="left-menu">
    <div class="mgt-name">
        <img alt="云协同中心服务台" src="@/assets/images/mgt.png"/>
    </div>
     <div class="left-menu__list">
        <div class="left-menu__item" v-for="menu in showMenuList" :key="menu.title">
            <div class="left-menu__content">
                <app-icon :iconName="menu.iconName" className="left-menu__icon"></app-icon>
                <div class="left-menu__text text-left text-ellipsis" :title="menu.title">{{menu.title}}</div>
            </div>
            <template v-for="submenu in menu.children" >
            <router-link class="left-menu__child" :to="submenu.routerPath" :key="submenu.title">
                <div class="left-menu__point"></div>
                <span class="left-menu__link text-left text-ellipsis" :title="submenu.title">{{submenu.title}}</span>
            </router-link>
            </template>
        </div>
    </div>
</div>
 
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("common");

export default {
    name: "left-menu",
    props: {
        showMenu: {
            type: Array,
            required: true
        }
    },
    data: () => ({}),
    computed: {
        ...mapState([
            "menu"
        ]),
        showMenuList() {
            let res = [];
            if(!(this.showMenu && this.showMenu.length))return []
            this.menu.forEach(item => {
                if(item && item.children && item.children.length) {
                    let newItem = Object.assign({}, item, {children: []})
                    item.children.forEach(child => {
                        if(this.showMenu.some(showItem => showItem.menuCode === child.routerPath)) {
                            newItem.children.push(child)
                        }
                    })
                    if(newItem.children.length) {
                        res.push(newItem)
                    }
                }
            })
            return res;
        }
    },
    watch: {
        showMenuList(newVal, oldVal) {
            let notFirstLogin = sessionStorage.getItem("NOT_FIRST_LOGIN");
            if(!notFirstLogin && newVal && newVal.length) {
                sessionStorage.setItem("NOT_FIRST_LOGIN", true)
                this.redirectRouter()
            }
        }
    },
    methods: {
        // 跳转至配置默认的路由
        redirectRouter() {
            let defaultRouter = this.showMenuList[0];
            if( defaultRouter && defaultRouter.children && defaultRouter.children[0]) {
                this.$router.replace({
                    path: defaultRouter.children[0].routerPath
                })
            }
        }
    }
};
</script>
<style lang="scss" src="../../../assets/styles/main/leftMenu.scss" scoped></style>

